import {
  Form, Icon, Input, Button, notification,
} from 'antd';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './index.less';
import request from '../../util/request.js';


const FormItem = Form.Item;

class HBForm extends Component {
  static propTypes = {
    form: PropTypes.object.isRequired,
  }

  constructor() {
    super();
    this.state = {
      loading: false,
    };
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          loading: true,
        });
        console.log('Received values of form: ', values);
        request.post('/hb', {
          mobile: values.tel,
          url: values.url,
        }).then(
          (res) => {
            console.log('----res----', res);
            this.setState({
              loading: false,
            });
            notification.open({
              message: '',
              placement: 'topLeft',
              description: res.data.message,
            });
          },
        ).catch(
          (error) => {
            this.setState({
              loading: false,
            });
            notification[error]({
              message: '出错了',
              placement: 'topLeft',
              description: error,
            });
          },
        );
      }
    });
  }

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { loading } = this.state;
    return (
      <Form onSubmit={this.handleSubmit} className="hb-form">
        <FormItem>
          {getFieldDecorator('url', {
            rules: [{ required: true, message: 'Please input your url!' }],
          })(
            <Input prefix={<Icon type="link" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="链接" autoComplete="off" />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('tel', {
            rules: [{ required: true, message: 'Please input your tel!' }],
          })(
            <Input prefix={<Icon type="phone" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="tel" />,
          )}
        </FormItem>
        <Button type="primary" htmlType="submit" className="hb-form-button" loading={loading}>滴滴</Button>
      </Form>
    );
  }
}

export default Form.create()(HBForm);
